<template>
  <div
    class="mz-panel light"
    :class="{
      active,
      second
    }"
  >
    <!-- top -->
    <div class="mz-panel-top" v-if="!second">
      <!-- left -->
      <div class="mz-panel-top-left">
        <div class="icon-left">
          <slot name="icon-left">
            <img src="./images/dot.png" alt="" />
          </slot>
        </div>
        <div class="title">
          <slot name="title">{{ title }}</slot>
        </div>
        <div class="icon-info">
          <slot name="icon-info"> </slot>
        </div>
      </div>
      <!-- right -->
      <div class="mz-panel-top-right">
        <slot name="top-right"></slot>
      </div>
      <!-- bg -->
      <div class="bg-box">
        <div class="left no-rem"></div>
        <div class="center"></div>
        <div class="right"></div>
      </div>
    </div>
    <!-- content -->
    <div class="mz-panel-content">
      <div
        class="title"
        v-if="second"
        :style="{
          textAlign: align
        }"
      >
        <slot name="title">{{ title }}</slot>
      </div>
      <div
        class="mz-panel-content-main"
        :style="{
          flexDirection: direction,
          ...mainStyle
        }"
      >
        <Empty v-if="$attrs.isEnable === false" emptyData="暂未开放，敬请期待"></Empty>
        <slot v-else></slot>
      </div>
      <!-- bg -->
      <div class="mz-panel-bg no-rem">
        <div class="bg-box top no-rem">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
        <div class="bg-box center no-rem">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
        <div class="bg-box bottom no-rem">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Empty from '../empty/index.vue'
/**
 * 面板组件
 * @author 朱琦（zhuq@microvideo.cn）
 * @date   时间：2022/7/26
 */
export default {
  name: 'MzPanel',
  components: { Empty },
  props: {
    // 面板标题
    title: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'left'
    },
    // 内容排列方式
    direction: {
      type: String,
      default: 'column' // column or row
    },
    // 是否是二级的面板样式
    second: {
      type: Boolean,
      default: false
    },
    // 主体样式
    mainStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      active: false
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="less">
@import url(./styles/index.less);
</style>
